<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<style>
    .box {
        width: 1000px;
        height: 700px;
        margin: auto;
    }

    .c-text {
        width: 350px;
        height: 34px;
        line-height: 34px;
    }

    .c-message {
        width: 400px;
        height: 50px;
    }

    .box-left {
        width: 400px;
        float: left;
    }

    .box-right {
        width: 600px;
        float: left;
    }

    #token {
        width: 200px;
        margin-right: 10px;
        margin-left: 10px;
    }

    #contentText {
        width: 300px;
    }

    #toUserId {
        width: 300px;
    }

    #msg-text {
        width: 600px;
        background: #f3fafd;
    }

    .c-text label {
        float: left;
    }

    .c-text input {
        float: left;
    }

    .c-text button {
        float: left;
    }

    .msg-send-title {
        width: 300px;
        /*margin-top: 50px;*/
    }
</style>
<body>
<div class="box">
    <h2>🚀WebSocket测试接口</h2>
    <div class="box-left">
        <h5>🌏连接:</h5>
        <div class="form-inline">
            <div class="c-text form-group">
                <label for="token">【token】:</label>
                <input id="token" name="token" type="text" value="token" class="form-control">
                <button onclick="openSocket()" class="btn btn-success">开启</button>
            </div>
        </div>
        <h5 class="msg-send-title">🍃消息发送:</h5>
        <div class="c-message form-group">
            <label for="toUserId">【目标】:</label>
            <input id="toUserId" name="toUserId" type="text" value="小明" class="form-control">
        </div>
        <div class="c-message form-group">
            <label for="contentText">【内容】:</label>
            <input id="contentText" name="contentText" type="text" value="hello" class="form-control">
        </div>
        <button onclick="sendMessage()" class="btn btn-info">发送</button>
    </div>
    <div class="box-right">
        <label>
            <textarea class="form-control" rows="10" disabled id="msg-text"></textarea>
        </label>
    </div>
</div>
</body>
<script>
    let socket;

    function openSocket() {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            const token = document.getElementById('token').value;
            // var socketUrl="ws://127.0.0.1:22599/webSocket/"+userId;
            const socketUrl = "ws://127.0.0.1:9999/api/ws/" + token;
            console.log(socketUrl);
            if (socket != null) {
                socket.close();
                socket = null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function () {
                console.log("websocket已打开");
                document.getElementById("msg-text").value = "websocket已打开" + "\n";
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                console.log(msg);
                const serverMsg = "收到服务端信息：" + msg.data;
                console.log(serverMsg);
                document.getElementById("msg-text").value += serverMsg + "\n";
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function () {
                console.log("websocket已关闭");
                document.getElementById("msg-text").value += "websocket已关闭" + "\n";
            };
            //发生了错误事件
            socket.onerror = function (ev) {
                console.log("websocket发生了错误", ev);
                document.getElementById("msg-text").value += "websocket发生了错误" + ev + "\n";
            }
        }
    }

    function sendMessage() {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            // console.log("您的浏览器支持WebSocket");
            const toUserId = document.getElementById('toUserId').value;
            const contentText = document.getElementById('contentText').value;
            const msg = '{"toUserId":"' + toUserId + '","contentText":"' + contentText + '"}';
            console.log(msg);
            socket.send(msg);
        }
    }
</script>
</html>
